@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

*{
padding: 0;
margin: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
scroll-behavior: smooth;
}

body,html{
    font-family: "DM Sans", sans-serif;
width: 100%;
height: 100vh;
background: #191919;
 }

 .wrapper{
    padding: 0 50px;
    width: 100%;
    height: 100vh;
    
    header{
        color: #fff;
        width: 100%;
        padding: 1vw 3vw;
         display: flex;
        justify-content: space-between;
        align-items: center;
        
        .header__logo{
            
            font-size: 30px;
            a{
                color: #fff;
            }
        }

        ul{
             display: flex;
            justify-content: center;
            align-items: center;
            gap: 35px;

            li{
                a{
                    color: #fff;
                    transition: 0.25s;
                }
                a:hover{
                    color: #118DA8;
                    transition: 0.25s;
                }
            }
        }
    }

    // block1
    .block1{
        width: 100%;
        height: auto;
         display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 35px;

        .block1__wrapper{
             display: flex;
            justify-content: center;
            align-items: center;
            gap: 35px;
            width: 100%;
            height: 100%;
            // left
            .block1__wrapper__left{
                
                position: relative;
                width: 25vw;
                height: 70vh;
                background: url(../public/block1/left.png)0 0/cover no-repeat;
            }
            .block1__wrapper__left::after{
                position: absolute;
                left: -1.5vw;
                top: -1.25vw;
                display: block;
                content: "";
                width: 75px;
                height: 75px;
                background: url(../public/block1/angle.png)50% 50%/contain no-repeat;
            }
            // right
            .block1__wrapper__right{
                position: relative;
                width: 30vw;
                height: 70vh;
                 display: flex;
                 flex-direction: column;
                justify-content: center;
                align-self: center;
                color: #ffff;
                font-size: 70px;
                .block1__wrapper__right__text{
                     display: grid;
                    align-items: center;
                    width: 100%;
                    height: 100%;
                    p{
                        
                        margin-top: -2.5vw;

                        span:nth-child(1)::after{
                            content: "";
                            display: block;
                            position: absolute;
                            width: 125px;
                            height: 100px;
                            background: url(../public/block1/underline.svg)0 0/cover no-repeat;
                            bottom: 8vw;
                        }

                        span:nth-child(2){
                            font-weight: Bold;
                        }
                    }
                }

                // link
                .block1__wrapper__right__link{
                    width: 100%;
                     display: flex;
                     flex-direction: column;
                    justify-content: center;
                    align-items: flex-start;
                    font-size: 15px;
                    gap: 20px;
                    // li
                    ul{
                         display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        gap: 15px;
                        width: 50%;
                        li{
                            cursor: pointer;
                            width: 40px;
                            height: 40px;
                            background: #fff;
                            aspect-ratio: 1;
                            border-radius: 50%;
                            
                        }
                        // one
                        li:nth-child(1){
                            background: url(../public/block1/link/one.svg)0 0/cover no-repeat;
                        }
                        li:nth-child(2){
                            background: url(../public/block1/link/two.svg)0 0/cover no-repeat;
                        }
                        li:nth-child(3){
                            background: url(../public/block1/link/three.svg)0 0/cover no-repeat;
                        }
                        li:nth-child(4){
                            background: url(../public/block1/link/four.svg)0 0/cover no-repeat;
                        }
                        li:nth-child(5){
                            background: url(../public/block1/link/five.svg)0 0/cover no-repeat;
                        }
                    }
                }
            }
        }
    }

    .episodes{
        width: 100%;
        height: auto;
         display: flex;
         flex-direction: column;
        justify-content: center;
        align-items: center;
        background: 2px solid blue;
        

        .episodes__up{
             display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            color: #fff;
            
            .episodes__up-text{
                font-size: 64px;
                font-weight: 400;
            }
            .episodes__up-but{
                cursor: pointer;
                 display: flex;
                justify-content: center;
                align-items: center;
                width: 200px;
                height: 50px;
                font-size: 17px;
                background: #118DA8;
                border-radius: 5px;
            }


        }
        // content
        .episodes__content{
            width: 100%;
            height: 100%;
        }
    }

    .block2{
        width: 100%;
         display: flex;
        justify-content: center;
        align-items: center;        
        padding: 35px 0px;

       .block2__wrapper{
        width: 100%;
        height: 100%;
         display: flex;
        justify-content: space-between;
        align-items: center;

        .block2__wrapper-left{
            width: 40vw;
            height: 100vh;
             display: flex;
             flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            color: #fff;
            gap: 15px;
            
            .block2__wrapper-left-link{
                width: 120px;
                height: 120px;
                background: url(../public/block2/link.png)0 0/cover no-repeat;
            }

            .block2__wrapper-left-meet{
                font-size: 18px;
                color:#118DA8;
            }

            .block2__wrapper-left-name{
                font-size: 65px;
                font-weight: 400;
            }

            .block2__wrapper-left-main{
                display: flex;
                flex-direction: column;
                width: 70%;
                font-size: 22px;
                color: rgba(255, 255, 255,0.7);
            }
        }
        
        .block2__wrapper-right{
            border-radius: 15px;
            width: 40vw;
            height: 100vh;
            background: url(../public/block2/photo.png)0% 0%/cover no-repeat;
        } 
       } 
    }

    .subscribe{
        margin: 100px 0px;
        width: 100%;
        height: 400px;

        .subscribe__wrapper{
            position: relative;
            padding: 50px;
            border-radius: 30px;
             display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            height: 100%;
            background: #000;
            // left
            .subscribe__wrapper-left{   
                 display: flex;
                justify-content: flex-start;
                align-items: flex-start;
                flex-direction: column;
                height: 100%;
                width: 35vw;
                line-height: 75px;
                padding: 0;
                .subscribe__wrapper-left-type{
                    font-size: 18px;
                    color: #118DA8;
                }

                .subscribe__wrapper-left-main{
                    font-size: 72px;
                    color: #fff;
                }
            }

            .subscribe__wrapper-left::after{
                position: absolute;
                content: "";
                display: block;
                width: 150px;
                height: 100px;
                background: url(../public/block2/angle.svg)50% 50%/contain no-repeat;
                left: -1.5vw;
                bottom: -4vh;
            }

            .subscribe__wrapper-right{
                height: 100%;
                width: 35vw;
                 display: flex;
                justify-content: center;
                align-items: center;                                
                
                form{
                    gap: 25px;
                    width: 100%;
                    height: 100%;
                     display: flex;
                    justify-content: space-between;
                    align-items: flex-start;
                    flex-direction: column;

                    input{
                        border-radius: 5px;
                        color: rgba(255, 255, 255,0.7);
                        border: none;
                        width: 100%;
                        height: 10vh;
                        font-size: 24px;
                        padding: 00 25px;
                        background: #191919;
                    }

                    button{
                        cursor: pointer;
                        width: 5vw;
                        height: 5vh;
                        border-radius: 5px;
                        border: none;
                        color: #fff;
                        background: #118DA8;
                    }
                }
            }
        }
    }

    .comments{
        width: 100%;
        height: auto;
        margin: 100px 0px;
        ul{
            gap: 15px;
             display: grid;
            grid-template-columns: 1fr 1fr 1fr;   
            grid-template-rows: 1fr 1fr;         
        }
    }

    footer{
        width: 100%;

        .footer__wrapper{
            width: 100%;
            height: 100%;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;

            
            .footer__wrapper-logo{
                
                .footer__wrapper-logo-main{
                    font-size: 40px;
                    a{
                        color: #fff;
                    }
                }
                // link
                ul{
                    gap: 15px;
                     display: flex;
                    justify-content: flex-start;
                    align-items: center; 
                }
            }

            .footer__wrapper-nav{
                 display: flex;
                justify-content: space-around;
                align-items: flex-start;

                a{
                    color: #fff;
                }
            }

            .footer__wrapper-link{
                gap: 20px;
                 display: flex;
                justify-content: center;
                align-items: flex-start;
                
            }
        }
    }
 }
